<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title> 瑞能电力数据看板</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="./css/index.css">
        <script src="../application/admin/view/databoard/js/flexible.js"></script>
<!--        <script src="../application/admin/view/databoard/js/jquery.min.js"></script>-->

    </head>

    <body>
        <div id="app">
            <div class="left">
                <div style="margin-top:0.67rem">19:52</div>
                <div class="week">
                    <div>星期三</div>
                    <div>2023年1月11日</div>
                </div>
                <img src="../application/admin/view/databoard/img/cloud.png" alt="">
            </div>
            
            <div class="title">
                瑞能电力数据看板
            </div>
            <div class="right">
                <div >数据由平台进行统计</div>
                <button class="enter">全屏</button>
            </div>
            <div class="mainbox">
    
                <!-- 设备统计 数量-->
                <!-- <div class="num"> -->
                  
                    
                    <!-- <ul>
                        <li>
                            <div class="num_title">已维修设备数</div>
                            <di class="num_num ok_num"></di>
                        </li>
                        <li>
                            <div class="num_title">设备故障数</div>
                            <di class="num_num all_num"></di>
                        </li>
                        <li>
                            <div class="num_title">设备总数</div>
                            <di class="num_num equipment_num"></di>
                        </li>
                        <li>
                            <div class="num_title">待保养设备数</div>
                            <di class="num_num maintained_num"></di>
                        </li>
                        <li>
                            <div class="num_title">已保养设备数</div>
                            <di class="num_num equipment_ok_num"></di>
                        </li>
                    </ul> -->
                <!-- </div> -->
                <!-- 圆形统计图 -->
                <div class="circular">
                    <div>
                        <div class="projectRate">项目分类比</div>
                        <el-date-picker 
                            style="width: 260px;height: 36px;"
                            v-model="value1"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="c">
                        </el-date-picker>
                    </div>
                    <div class="circular_echsrts" id="circular"></div>
                    <!-- <ul>
                        <li style="color: #209883;">大型风电</li>
                        <li style="color: #209883;">分散式风电</li>
                        <li style="color: #209883;">大型光伏</li>
                        <li style="color: #209883;">分散式光伏</li>
                        <li style="color:#209883;">运营类</li>
                        <li style="color: #209883;">其他</li>
                    </ul> -->
                </div>
                <!-- 设备故障情况 波线图 -->
                <div class="wave">
                    <div class="maintain_title">
                        <div class="maintain_title_left">项目增长量</div>
                        
                        <!-- <div class="maintain_title_right" id="choice_operation">
                            <span style="margin-right:0.8125rem" id="wave_content">周</span>
                            <img src="../application/admin/view/databoard/img/dowm.png" alt="">
                            <ul class="maintain_title_list wave_week">
                                <li class="week">周</li>
                                <li class="month">月</li>
                            </ul>
                        </div> -->
                    </div>
                    <div class="wave_echarts" id="wave"></div>
                </div>
                <!-- 待保养设备详情 -->
                <div class="maintain">
                    <div class="maintain_title">
                        <div class="maintain_title_left">项目完成数据</div>
                        <el-date-picker 
                            style="width: 250px;height: 36px;"
                            v-model="value1"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="c">
                        </el-date-picker>
                        <!-- <div class="maintain_title_right">
                            <span style="margin-right:0.8125rem"
                                id="maintain_content">周</span>
                            <img src="../application/admin/view/databoard/img/dowm.png" alt="">
                            <ul class="maintain_title_list maintain_week">
                                <li class="week">周</li>
                                <li class="month">月</li>
                            </ul>
                        </div> -->
                       
                    </div>
                    <!-- <div class="maintain_data">
                        <div></div>
                        <div></div>
                    </div> -->
                    <!-- <div class="maintain_echarts" id="maintain">
                    </div> -->
                    <div class="com-screen-content">
                        <div class="topRec_List maintained">
                            <dl>
                                <dd>百万</dd>
                                <dd>十万</dd>
                                <dd>万</dd>
                                <dd>千</dd>
                                <dd>百</dd>
                                <dd>十</dd>
                                <dd>个</dd>
                            </dl>
                            <div class="maintain_list">
                                0,000,008
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 设备操作记录  -->
                <div class="operation">
                    <div class="maintain_title">
                        <div class="maintain_title_left">类型分布</div>
                        <el-date-picker 
                            style="width: 250px;height: 36px;"
                            v-model="value1"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="c">
                        </el-date-picker>
                        <!-- <div class="maintain_title_right">
                            <span style="margin-right:0.8125rem"
                                id="operation_content">周</span>
                            <img src="../application/admin/view/databoard/img/dowm.png" alt="">
                            <ul class="maintain_title_list operation_week">
                                <li class="week">周</li>
                                <li class="month">月</li>
                            </ul>
                        </div> -->
                    </div>
                    <div class="maintain_echarts" id="operation"></div>
                </div>
                <!-- 设备故障详情 列表 -->
                <!-- <div class="detail">
                    <div class="detail_title">故障设备详情</div>
                    <dl>
                        <dd>科室</dd>
                        <dd>ID</dd>
                        <dd>名称</dd>
                        <dd>型号</dd>
                    </dl>
                    <div id="detail_list">
                        <ul>
    
                        </ul>
                    </div>
                </div> -->
                <!-- 进入系统 -->
                <!-- <div class="enter">
                    进入系统
                </div> -->
            </div>
    
            <!--  <script type="text/javascript"
                src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> -->
            <script src="../application/admin/view/databoard/js/echarts.js"></script>
            <script src="../application/admin/view/databoard/js/wave.js"></script>
            <script src="../application/admin/view/databoard/js/circular.js"></script>
            <script src="../application/admin/view/databoard/js/maintain.js"></script>
            <script src="../application/admin/view/databoard/js/operation.js"></script>
            <script src="../application/admin/view/databoard/js/detail.js"></script>
            <script>
            var baseUrl = ' https://rndl.westts.cn/api/databoard'
    
            
            
            new Vue({
                el: '#app',
                data() {
                    return {
                        value1: '' ,
                        }
                },
                created(){
                    // this.fun()
                },
                methods:{
                    c(s){
                        console.log(s,'sssssss');
                    }
                }
            })

            var interval
            $(document).ready(function () {
                // getNum()//设备统计 数量
                getcircular()//圆形统计图
                getwave()// 设备故障情况
                getoperation()//设备操作记录
                // getdetail()//设备故障详情
                // getmaintain()//带保养设备详情
            });
            // function getNum() {
            //     $.ajax({
            //         url: baseUrl+"/getRecord",
            //         type: 'POST',
            //         dataType: "json",
            //         success: function (data) {
            //             $(".ok_num").text(data.data.ok_num)
            //             $(".all_num").text(data.data.all_num)
            //             $(".equipment_num").text(data.data.equipment_num)
            //             $(".maintained_num").text(data.data.maintained_num)
            //             $(".equipment_ok_num").text(data.data.equipment_ok_num)
            //         },
            //         // 超时时间
            //         timeout: 2000,
            //         // 失败的回调
            //         error: function () {
            //             clearInterval(interval);
            //             // alert('设备数量统计请求数据失败！')
            //         }
            //     })
            // }
            (function () {
                interval = setInterval(function () {
                    // getNum();
                    getcircular()
                    getwave()
                    getoperation()
                    // getdetail()
                    // getmaintain()
                }, 1800000);
                /*    }, 1800000); */
            })();
    
            var a = 0
            $('.enter').click(function () {
                if (a == 0) {
                    requestFullScreen()
                    a = 1
                } else {
                    a = 0
                    exitFullscreen()
                }
    
            })
    
            //进入全屏
            function requestFullScreen() {
                var de = document.documentElement;
                if (de.requestFullscreen) {
                    de.requestFullscreen();
                } else if (de.mozRequestFullScreen) {
                    de.mozRequestFullScreen();
                } else if (de.webkitRequestFullScreen) {
                    de.webkitRequestFullScreen();
                }
            }
    
            //退出全屏
            function exitFullscreen() {
                var de = document;
                if (de.exitFullscreen) {
                    de.exitFullscreen();
                } else if (de.mozCancelFullScreen) {
                    de.mozCancelFullScreen();
                } else if (de.webkitCancelFullScreen) {
                    de.webkitCancelFullScreen();
                }
            }
            
        </script>
        </div>
        
    </body>

</html>